<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <script src="../js/public.js"></script>
    <script src="../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/exif.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/canvasResize.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
      	// 接收值
    </script>
    <style>
    	/* 头部   */
    	.mui-bar-nav{background-color: #71BB98;}
    	.mui-bar-nav .mui-title{color:#FFF;font-size:1.2rem;}
    	.mui-bar-nav .mui-action-back{color:#FFF;}
    	/* 内容区域 */
    	.mui-content{margin-bottom: 4rem;}
    	.mission,.maintain,.picture,.review{width: 98%; margin: 1rem 1%; background-color: #FFF; padding-top: 0.5rem;}
    	.mission h3,.maintain h3,.picture h3,.review h3{height: 2.2rem; line-height: 2.2rem; font-size: 1.2rem; margin: 0 1rem; border-bottom: 1px solid #ADADAD; font-weight: 500; color:#F47D00;}
    	.mission h3 span,.maintain h3 span,.picture h3 span{border-left: 4px solid #5D74F2; padding-left: 0.6rem; display: inline-block; height: 2rem;}
    	.maintain p,.review p{height: 2rem; line-height: 2rem; margin: 0 1rem; font-size: 1rem; padding-left: 1.5rem;}
    	.review{margin-top: 1.5rem; background-color: transparent; border:1px dashed #007AFF; border-radius: 5px;}
    	.review h3{padding-left: 0.5rem;}
    	.review p span{width: 15%; display: inline-block;}
    	.mission .mui-input-group{height: 5rem; margin: 0 1rem;}
    	.mission .mui-input-group .mui-input-row{border:1px !important; margin: 0; padding: 0; float: right; height: 2rem; line-height: 2rem;}
    	.mission .mui-input-group .mui-input-row label{font-size: 0.8rem; padding: 0; display: inline-block; width: 33%; height: 2rem; line-height: 2rem;}
    	.mui-input-group .mui-input-row:after{left:0;}
    	.mui-select:before{top:2px; right: 2rem;}
    	.mission .mui-input-group .mui-input-row input{padding-left: 0.2rem;padding-right: 0; margin-right: 1rem;width: 55%; border:1px solid #ADADAD;height: 1.4rem; display: inline-block; margin-top: 0.3rem; font-size: 0.9rem;}
    	.butp{margin: 0 0.5rem;}
    	.mui-btn{ height: 1.5rem; line-height: 1.5rem; padding: 0; text-align: center; width: 4rem;}
    	.mui-btn:last-child{float: right;}
    	.xj{height: 8rem; text-align: center;}
    	.dw{position: absolute; width: 100%;}
    	#headimg{width: 7rem; height: 7rem; margin-top: 0.5rem; background-color: #;}
    	.xj p{position:absolute; top:2.5rem; left:45%; width: 4rem; height: 3rem; line-height: 2.5rem;}
    	.xj p a{font-size: 3rem; color:#000000;width: 4rem; height: 3rem;}
    	/* 底部   */
    	.mui-bar-tab{color:#FFF;}
    	.mui-bar-tab .mui-tab-item{background-color: #71BB98; color:#FFF;} 
    	.mui-bar-tab .mui-tab-item:first-child{border-right: 1px solid #FFF;}
    	.mui-bar-tab .mui-tab-item .mui-icon{display: inline-block; font-size: 2.5rem;}
    	.mui-bar-tab .mui-tab-item.mui-active{color: red;}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">审核</h1>
	</header>
	<div class="mui-content">
	    <div class="mui-content-padded">
	    	<div class="review">
				<h3><span>审核信息</span></h3>
				<p><span>工单编号</span><a id="orderNo"></a></p>
				<p><span>设备名称</span><a id="resourceName"></a></p>
				<p><span>作业人</span><a id="username"></a></p>
				<p><span>作业时间</span><a id="updatetime"></a></p>
			</div>
			<div class="mission">
				<h3><span>指导信息</span></h3>
				<form class="mui-input-group">
	                <div class="mui-col-sm-4 mui-input-row">
	                    <label>现场分类</label>
	                    <input type="text" readonly="readonly" id=""/>
	                </div>
	                <div class="mui-col-sm-4 mui-input-row">
	                    <label>紧急程度</label>
	                    <input type="text" />
	                </div>
	                
	                
	                <div class="mui-col-sm-4 mui-input-row">
	                    <label>故障分类</label>
	                    <input type="text" id="fault_sort" />
	                </div>
	                
	                <div class="mui-col-sm-4 mui-input-row">
	                    <label>电压等级</label>
	                    <input type="text" />
	                </div>
	                
	                <div class="mui-col-sm-4 mui-input-row">
	                    <label>危害程度</label>
	                    <input type="text" id="range" />
	                </div>
	                <div class="mui-col-sm-4 mui-input-row">
	                    <label>工单号</label>
	                    <input type="text" id="dan" />
	                </div>
	                
	                <!--<div class="mui-col-sm-12 mui-input-row">
	                    <label style="width: 12%;">故障现场</label>
	                    <input type="text"/ style="width:85%;">
	                </div>-->
	            </form>
			</div>
			<div class="maintain">
				<h3><span>维修结果</span></h3>
				<p>已完成</p>
				<p></p>
			</div>
			<div class="picture">
				<h3><span>照片</span></h3>
				<div class="xj">
					<div class="dw showimg" id="start">
						<img id="headimg" src=''>
        				<p><a href="javascript:;" class="imageup mui-icon mui-icon-camera"></a></p> 
					</div>
				</div>
			</div>
			<div class="butp">
				<!--<button type="button" class="mui-btn mui-btn-primary mui-action-back">取消</button>-->
				<button type="button" onclick="imgupgrade();" class="mui-btn mui-btn-primary">提交</button>
			</div>
	    </div>
	</div>
	<nav class="mui-bar mui-bar-tab">
	    <a class="mui-tab-item mui-active" style="border-right: 2px solid #fff;" id="home">
	        <span class="mui-icon mui-icon-home"></span>
	        <!--<span class="mui-tab-label">首页</span>-->
	    </a>
	    <a class="mui-tab-item" href="" id="myinfo">
	        <span class="mui-icon mui-icon-person"></span>
	        <!--<span class="mui-tab-label">电话</span>-->
	    </a>
	</nav>
	<script type="text/javascript">
		//
		document.getElementById('myinfo').addEventListener('tap',function(){
			mui.openWindow({
					url:"per_information.html",
					id:"per_information",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····",
						options:{
						}
					}
			})
		});
		//
		document.getElementById('home').addEventListener('tap',function(){
			mui.openWindow({
					url:"../main.html",
					id:"main",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····",
						options:{
						}
					}
			})
		});
	</script>
</body>
    <script>  
        var user = JSON.parse(localStorage.getItem('$users')).account; 
        $.plusReady(function() {
        	var cw = plus.webview.currentWebview();
			var order_id=cw.order_id;
            function accept(){
            	 mui.ajax({
		            type: "POST",
				    url: __PATH__+"index/child_page",
				    async: true,
				    data:{
				    	username:user,
				    	order_id:order_id
				    },
				    dataType: "json",
				    json: "jsoncallback",
				    timeout: 1000,
				    success: function(data) {
				    	console.log(data);
					    document.getElementById('orderNo').innerHTML=data.orderNo;
					    document.getElementById('resourceName').innerHTML=data.resourceName;
						document.getElementById('username').innerHTML=data.username;
						document.getElementById('updatetime').innerHTML=data.updatetime;
						document.getElementById('fault_sort').value=data.typeName;
						document.getElementById('range').value=data.range;
						document.getElementById('dan').value=data.orderNo;
				    },
				    error:function(xhr,type,errorThrown){
						mui.alert(xhr,'提示') 				
					}
				});
            }
            setTimeout("accept()",200);
            //拍照接口
            var btn = document.getElementById('start');
				btn.addEventListener('tap',function(){
					var btnArray = [{title:"照相机"},{title:"相册"}]; //选择按钮  1 2 3
					plus.nativeUI.actionSheet({
					    title:"请选择",
					    cancel:"取消", // 0
					    buttons:btnArray
					    }, 
					    function(e){
					        var index = e.index; // 
					        switch (index){
					            case 1:
					                //写自己的逻辑
					             	cameraimages();
					            break;
					            case 2:
					            	galleryImgs();
					            break;
					        }
					});
					
				});
            //--
			
//      });
		
		//
		//上传单张图片
		function galleryImg() {
		    //每次拍摄或选择图片前清空数组对象
			f1.splice(0, f1.length);
			document.getElementsByClassName("showimg")[0].innerHTML = null;
			// 从相册中选择图片
			mui.toast("从相册中选择一张图片");
			plus.gallery.pick(function(path) {
			    showImg(path);
			}, function(e) {
			    mui.toast("取消选择图片");
			}, {
			    filter: "image",
			    multiple: false
			});
		}

		function galleryImgs() {
		        //每次拍摄或选择图片前清空数组对象
		    f1.splice(0, f1.length);
		    document.getElementsByClassName("showimg")[0].innerHTML = null;
		    // 从相册中选择图片
		    mui.toast("从相册中选择不超过两张图片");
		    plus.gallery.pick(function(e) {
		//                  if (e.files.length != 2) {
		//                      mui.toast('请选择身份证正面和背面照片共两张');
		//                      return false;
		//                  }
		        for (var i in e.files) {
		            showImg(e.files[i]);
		        }
		    }, function(e) {
		        mui.toast("取消选择图片");
		    }, {
		        filter: "image",
		        multiple: true
		    });
		}
        // 拍照添加文件
		function cameraimages() {
		        //每次拍摄或选择图片前清空数组对象
		    f1.splice(0, f1.length);
		    document.getElementsByClassName("showimg")[0].innerHTML = null;
		    var cmr = plus.camera.getCamera();
		    cmr.captureImage(function(p) {
		        plus.io.resolveLocalFileSystemURL(p, function(entry) {
		            var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。
		            showImg(localurl);
		        });
		    }, function(e) {
		        mui.toast("很抱歉，获取失败 "+ e);
		    });
		}
            // 全局数组对象，添加文件,用于压缩上传使用
        var f1 = new Array();


		function showImg(url) {
		    // 兼容以“file:”开头的情况
		    if (0 != url.toString().indexOf("file://")) {
		        url = "file://" + url;
		    }
		    var _div_ = document.getElementsByClassName("showimg")[0];
		    var _img_ = new Image();
		    _img_.src = url; // 传过来的图片路径在这里用。
		        _img_.onclick = function() {
		                plus.runtime.openFile(url);
		            };
		    _img_.onload = function() {
		        var tmph = _img_.height;
		        var tmpw = _img_.width;
		        var isHengTu = tmpw > tmph;
		        var max = Math.max(tmpw, tmph);
		        var min = Math.min(tmpw, tmph);
		        var bili = min / max;
		        if (max > 1200) {
		            max = 1200;
		            min = Math.floor(bili * max);
		        }
		        tmph = isHengTu ? min : max;
		        tmpw = isHengTu ? max : min;
		        _img_.style.border = "1px solid rgb(200,199,204)";
		        _img_.style.margin = "10px";
		        _img_.style.width = "100px";
		        _img_.style.height = "200px";
		        _img_.onload = null;
		        plus.io.resolveLocalFileSystemURL(url, function(entry) {
		                entry.file(function(file) {
		//                  console.log(file.size + '--' + file.name);
		                    canvasResize(file, {
		                        width: tmpw,
		                        height: tmph,
		                        crop: false,
		                        quality: 50, //压缩质量
		                        rotate: 0,
		                        callback: function(data, width, height) {
		                            f1 = data.substr(data.indexOf(',')+1);
		                            _img_.src = data;
		                            _div_.appendChild(_img_);
		                            plus.nativeUI.closeWaiting();
		//                          console.log(data);
		                        }
		                    });
		                });
		            },
		            function(e) {
		                plus.nativeUI.closeWaiting();
		                console.log(e.message);
		            });
		    };
		};
				//上传
        function imgupgrade() {
                var wt = plus.nativeUI.showWaiting();
                var urls = 'http://www.sccham.com/upload_file.php';
                var dataType = 'json';
                //发送数据  
                var data = {
                	photo:f1,	//base64
                	user:user
					}
				//成功响应的回调函数
		        var success = function(response) {
		        	var rrs = response;
		            plus.nativeUI.closeWaiting();
		            if (response) {
	        		    alert('上传成功');
		                mui.openWindow({
								url:"work_order.html",
								id:"work_order",
								style:{},
							   extras:{
								   	title:titleName,
								   	workNo:workNo,
								   	equipmentName:equipmentName,
								   	assetNo:assetNo
								   },
								show:{
									autoShow:true,
									aniShow:"slide-in-right",
									duration:100
								},
								waiting:{
									autoShow:false,
									title:"正在加载·····",
									options:{
						//				width:
						//				height:
									 }
								 }
							})
		            }else{
		            	alert("上传失败");
		            }
		        }
                mui.post(urls, data, success, dataType);
           }
    </script> 
</html>